<!DOCTYPE html>
<!--
 File:      clrm-library.html
 Author:    Henry Feild
 Date:      17-Mar-2013
 Purpose:   A listing of the available CLRM apps and study modules.

%%LICENSE%%

Version: %%VERSION%%
-->
<html>
<head>
    <link rel="shortcut icon" type="image/png"
        href="../css/img/crowdlogger-logo.001.16x16.png"/>
    <title>%%FULL_PROJECT_NAME%%&mdash;Apps &amp; Studies</title>
    <link href="../css/dialog.css" rel="stylesheet" type="text/css">
    <link href="../css/clrm.css" rel="stylesheet" type="text/css">

    <!-- Load jQuery first. -->
    <script src="../js/external_lib/jquery.min.js"></script>
    <script src="../js/external_lib/jquery-ui.min.js"></script>

    <script src="../js/dialog.js"></script>
    <script src="../html-js/clrm-library.js"></script>

</head>
<body>
<span class="hidden" id="init"></span>
<div class="bodyWrapper">
    <!-- Brings us down to just below the title. -->

    <!-- The header. -->
    <div class="header">
        <div class="title with-logo"> 
            <span class="logo-version version titleSub">version %%VERSION%%</span>
            <img class="logo" src="../css/img/crowdlogger-logo.002.png"/>
            <span class="titleMain">Apps &amp; Studies</span>
        </div>
    </div>

    <div style="clear: both;"></div>
    <div class="headerBuffer"></div>

    <div id="popup">
        <div id="message-container">
            <div id="message"></div>
            <button id="message-dismiss">Dismiss</button>
        </div>
    </div>

    <span style="color: orange">Mouse over an app or study</span> to find out more information and install, configure, disable, or uninstall. <span style="color: orange">Click outside of the information box</span> or click the "Dismiss" button to make the information box disappear. Don't know what apps or studies are? <a href="%%SERVER_BASE_URL%%/about.html#apps-and-studies">Check out this page for an overview.</a>

        <!-- Template. -->
        <div class='templates'>
            <div id="clrm-template" class="clrm-container">
                <div class="clrm app" data-id="clrm">
                    <span class="ribbon installed enabled">installed</span>
                    <span class="ribbon installed not-enabled">disabled</span>
                    <img data-id="logo" alt="" src=""/>
                    <span class="name" data-id="name"></span>
                </div>
                <div class="info" data-id="info">
                    <h2 data-id="name"></h2>
                    <p data-id="description">
                    </p>

                    <button class="installed enabled" data-type="open">Open</button>
                    <button class="installed enabled confirm" data-type="configure">Configure</button>
                    <button class="installed" data-type="uninstall">Remove</button>
                    <button class="not-installed" data-type="install">Install</button>
                    <button class="installed enabled" data-type="disable">Disable</button>
                    <button class="installed not-enabled" data-type="enable">Enable</button>
                    <button class="installed dev-mode" data-type="update">Update</button>
                    <button data-type="dismiss">Dismiss</button>

                </div>
            </div>  
        </div>



    <h1>Apps</h1>
    <div id="apps" class="clrm-listing apps">
    </div>


    <h1>Studies</h1>
    <div id="studies" class="clrm-listing studies">
    </div>


    <!-- Everything below here is for the footer. -->
    <div class="buffer">
    </div>
        
    <div class="footer" >
        <div class="copyright">
            %%LICENSE_WEB%%
        </div>
    </div>
</div>
<div class="emptyFooter">
</div>
</body>
</html>
